@media only screen and (max-width: 767px) {
  .desktop {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .mobile {
    display: none;
  }
}

.p-relative {
  position: relative;
}

.w-100 {
  width: 100% !important;
}

.f-basis-auto {
  flex-basis: auto !important;
}

.f-centered {
  justify-content: center;
  align-items: center;
}

.f-grow {
  flex-grow: 1;
}

.f-row-reverse {
  flex-direction: row-reverse;
}

.f-x-center {
  justify-content: center;
}

.f-y-center {
  align-items: center;
}

.f-x-space-around {
  justify-content: space-around !important;
}

.f-x-space-between {
  justify-content: space-between;
}

.f-x-space-even {
  justify-content: space-evenly;
}

.f-x-fend {
  justify-content: flex-end !important;
}

.f-y-start {
  align-items: flex-start !important;
}

.f-row-gap-05 {
  row-gap: calc(var(--page-pad) / 2);
}

.card-f-x-space-even {
  .card-row {
    justify-content: space-evenly;
  }
}

.card-f-x-end {
  justify-content: flex-end;
}
/* .f-self-x-center {
  justify-self: center;
}

.f-self-x-end {
  justify-self: flex-end;
} */

.f-self-start {
  align-self: flex-start !important;
}

.f-self-center {
  align-self: center;
}

.f-self-end {
  align-self: flex-end !important;
}

.f-align-end {
  align-items: flex-end !important;
}

/* .f-nowrap {
  flex-wrap: nowrap !important;
} */

.f-col {
  flex-direction: column;
}

.m-t-0 {
  margin-top: 0 !important;
}

.m-t-auto {
  margin-top: auto !important;  
}
@media only screen and (max-width: 767px) {
  .m-t-auto {
    margin-top: calc(var(--page-pad) / 2) !important;
  }
}

.m-t-default {
  margin-top: var(--page-pad) !important;
}

.m-r-0 {
  margin-right: 0 !important;
}

.m-r-default {
  margin-right: var(--page-pad) !important;
}

.m-l-0 {
  margin-left: 0 !important;
}

.m-l-1 {
  margin-left: 1em !important;
}

.m-l-auto {
  margin-left: auto !important;
}

.m-b-auto {
  margin-bottom: auto !important;
}

.m-x-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.m-b-default {
  margin-bottom: var(--page-pad) !important;
}

.p-0 {
  padding: 0 !important;
}

.p-b-0 {
  padding-bottom: 0 !important;
}

.p-y-default {
  padding-top: calc(var(--page-pad) / 2);
  padding-bottom: calc(var(--page-pad) / 2);
}

.p-x-1 {
  padding-left: 1em;
  padding-right: 1em;
}

.b-0 {
  border: none !important;
}

.font-n {
  font-weight: normal;
}

.text-hint {
  font-weight: bold;
  opacity: 50%;
  font-size: 1.5rem; /* .h3-size */
}

.b-rounded {
  border-radius: var(--card-border-radius);
}

.b-rounded-4 {
  border-radius: calc(var(--card-border-radius) * 4);
  padding: 10px;
}

.round {
  border-radius: 50%;
  width: 1.375rem;
  height: 1.375rem;
  padding: 8px;

  background: var(--colour-main);
  color: var(--colour-on-main-colour-background);
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
}

.round-2 {
  border-radius: 50%;
  width: 2.375rem;
  height: 2.375rem;
  padding: 8px;

  background: var(--colour-main);
  color: var(--colour-on-main-colour-background);
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
}

.c-mugup {
  color: var(--colour-main);
}

.bg-mugup {
  color: var(--colour-on-main-colour-background);
  background-color: var(--colour-main);
}

.bg-mugup-40 {
  background-color: var(--colour-main-40);
}

.c-font-mugup {
  color: var(--colour-on-main-colour-background);
}

.bg-mugup.lighter {
  background-color: var(--colour-main-92);
}
.bg-mugup.lightest {
  background-color: var(--colour-main-80);
}

.c-highlight {
  color: var(--colour-yellow);
}

.bg-highlight {
  background-color: var(--colour-yellow) !important;
}

.bg-highlight-muted {
  background-color: var(--colour-yellow-muted) !important;
}

.text-center {
  text-align: center;
}

.line-height-150 {
  line-height: 1.5em !important;
}

.line-height-300 {
  line-height: 3em !important;
}

.shad-default {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.2) !important;
}

.shad-default-in {
  box-shadow: 0 10px 16px 0 rgba(0,0,0,0.24) inset !important;
}

/* .invert {
  filter: invert(1);
} */

.scale-75 {
  transform: scale(75%);
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-hidden {
  overflow: hidden;
}

ul.list-tick {
  list-style: none;
}

.list-tick li::before {
  content: '✓';
}